import {
  emit
} from './eventBus.js'
import {
  dom,
  _append,
  _attr,
  _query
} from './dom.js'
import { changeProperty } from '../utils/index.js'
// import { _checkbox } from './checkbox.js'
import { _btn } from './btn.js'
import { _input, _number, _checkbox } from './input.js'
import { _select } from './select.js'
import { _popover } from './popover.js'

// 表单
export const _form = (options = {}, events = {}) => {
  let form = dom.form([], {}, events)
  let {
    title,
    fields = [],
    op = [],
    // config
  } = options
  let formTitle = dom.div(title, {
    class: 'form-title'
  })
  let formItems = fields.filter(t => t.field).map(field => _formItem(field, options))
  let btns = dom.div(op.map(t => dom.div(t.text, {
    class: `form-btn${t.className ? ' ' + t.className : ''} ${t.popover ? ' popover' : ''}`,
    type: 'button'
  }, {
    click: (e) => {
      let model = {}
      fields.filter(t => t.field).forEach(t => { //['text','number','select'].includes(t.type)
        let key = t.field
        let item = _query(`[name=${key}]`, form)
        let type = _attr(item, "type")
        switch (type) {
          case 'number':
            model[key] = Number(item.value)
            break;
          case 'checkbox':
            model[key] = item.checked
            break
          default:

            model[key] = item.value
        }
        // model[key] = type === 'number' ? Number(item.value) : item.value
      })
      let scope = {
        model,
        form,
        emit //事件
      }
      // 弹窗
      if (t.popover) {
        document.body.appendChild(_popover(t.popover, e.target))
      }


      t.click.call(scope, e, scope)
    }
  })), {
    class: 'form-btn-group'
  })
  // debugger
  // return form
  let formBody = dom.div([formItems], {
    class: 'form_body'
  })

  return _append(form, [formTitle, formBody, btns])
}

export const _formItem = (field, config = {}) => {
  let { type, value } = field
  // 改下属性名
  field = changeProperty(field, 'field', 'name')
  let itemLabel = dom.div(field.label, {
    class: 'form-item-label',
    style: {
      width: config.labelWidth + 'px'
    }

  })
  let item = dom.div(itemLabel, {
    class: 'form-item',
    width: config.width
  })

  switch (type) {
    case "select":
      let select = _select(value, {
        ...field,
        class: 'form-item-' + type,
        width: config.inputWidth,
        options: field.options
      })
      _append(item, select)
      break
    case 'number':
    case "random":
      let inputNumber = _number(value, {
        ...field,
        width: config.inputWidth,
        class: 'form-item-' + type
      })
      _append(item, inputNumber)
      break;
    // case 'boolean':
    //   // let inputBool = dom.input(value, {
    //   //   // ...props,
    //   //   ...field,
    //   //   // checked: value,
    //   //   type: 'checkbox'
    //   // })
    //   let inputBool = _checkbox(value, {
    //     class: 'form-item-' + type
    //   })
    //   _append(item, inputBool)

    //   break;

    case 'boolean':
    case 'checkbox':
      let checkbox = _checkbox(value, {
        ...field,
        class: 'form-item-' + type
      })
      _append(item, checkbox)
      break;
    default:
      let input = _input(value, {
        ...field,
        width: config.inputWidth,
        class: 'form-item-input'
      })
      _append(item, input)
  }
  return item
}
